<!--#
layout("/layouts/platform.html"){
#-->
<style>
    .div-line {
        border-bottom: 1px solid #EBEEF5;
    }
    .ml40 {
        margin-left: 40px;
    }

</style>
<div id="app" v-cloak>

    <el-row class="header navbar bg-white shadow">
        <div class="btn-group tool-button mt5 ml40">
            <el-date-picker
                    v-model="searchDate"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    size="medium"
                    :default-time="['00:00:00', '23:59:59']"
                    @change="change"
                    value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </div>
    </el-row>
    <el-row class="el-table-container" style="padding-top: 85px;">
        <el-form :model="formData" style="margin: 0 50px;width: 600px;border-top: 1px solid #eee;"
                 label-width="450px"
                 label-position="left">
            <el-form-item class="div-line" label="当天后台充值人数">
                <div>{{formData.platFormRechargeNum}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="当天后台充值金额$">
                <div>{{formData.platFormRechargeAmount}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="当天后台充值笔数$">
                <div>{{formData.platFormRechargeCount}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="当天新充值人数">
                <div>{{formData.newRechargeNum}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="当天新充值总金额$">
                <div>{{formData.newRechargeAmount}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="当天二次充值人数">
                <div>{{formData.oldRechargeNum}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="当天二次充值总金额$">
                <div>{{formData.oldRechargeAmount}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="当天充值(第三方)笔数$">
                <div>{{formData.thirdRechargeCount}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="充值总人数">
                <div>{{formData.totalRechargeNum}}</div>
            </el-form-item>


            <el-form-item class="div-line" label="当天提现总额$">
                <div>{{formData.withdrawAmount}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="当天提现人数">
                <div>{{formData.withdrawNum}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="注册人数">
                <div>{{formData.registerNum}}</div>
            </el-form-item>
            <el-form-item class="div-line" label="当天收益(用户充值 - 后台充值(赠送) - 提现)">
                <div>{{formData.newRechargeAmount + formData.oldRechargeAmount - formData.platFormRechargeAmount - formData.withdrawAmount}}</div>
            </el-form-item>
        </el-form>
    </el-row>

</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            let self = this;
            return {
                pickerOptions: {
                    disabledDate: function (time) {
                        return time.getTime() >= new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000);
                    },
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'weeks').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-1, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            var temp = moment().add(-3, 'months').valueOf();
                            start.setTime(temp);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                searchDate: [new Date(new Date().toDateString()),
                    new Date(new Date().setHours(23,59,59))],
                pageForm: {
                    searchDate: [],
                },
                formData: {
                    platFormRechargeAmount: '',
                    platFormRechargeNum: '',
                    newRechargeNum: '',
                    oldRechargeAmount: '',
                    oldRechargeNum: '',
                    registerNum: '',
                    newRechargeAmount: '',
                    totalRechargeNum: '',
                },
            }
        },
        methods: {
            formatAt: function (val) {
                if (val > 0)
                    return moment(val * 1000).format("YYYY-MM-DD HH:mm");
                return "";
            },
            change: function () {
                let self = this;
                self.pageForm.searchDate = self.searchDate.toString();
                this.doSearch();
            },
            init: function () {//加载数据
                this.pageForm.searchDate = [this.formatDate(this.searchDate[0].getTime()),
                    this.formatDate(this.searchDate[1].getTime())].toString();
                this.doSearch();
            },
            doSearch: function () {
                let self = this;
                sublime.showLoadingbar();//显示loading
                $.post(base + "/platform/user/daily/statistics/data", self.pageForm, function (data) {
                    sublime.closeLoadingbar();//关闭loading
                    if (data.code === 0) {
                        self.formData = data.data;
                    }
                }, "json");
            },
            formatDate: function (timeStamp) {
                function isZero(m) {
                    return m < 10 ? '0' + m : m
                }

                //时间戳是整数，否则要parseInt转换
                var time = new Date(timeStamp); // 需要使用Date格式进行日期转化，若是时间戳、字符串时间，需要通过new Date(..)转化
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                var h = time.getHours();
                var mm = time.getMinutes();
                var s = time.getSeconds();
                return y + '-' + isZero(m) + '-' + isZero(d) + ' ' + isZero(h) + ':' + isZero(mm) + ':' + isZero(s);
            }

        },
        created: function () {
            this.init();
        }
    });
</script>
<!--#
}
#-->